<!-- 宫格视频，可选宫格4,5,6,9，根据传入的数组长度决定 -->
<template>
  <div class="videos-view">
    <MultipleVideos :videos="videos"></MultipleVideos>
    <!-- 测试 -->
    <div style="margin-top: 20px">
      <button @click="handleChangeOne('1', 'http://xxx')">更换第一个</button>
      <button @click="handleChangeAll">更换所有</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MultipleVideos from '@/components/videoView/multipleVideos.vue'
// 视频地址
const videos = ref([
  {
    id: 1,
    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  },
  {
    id: 2,
    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  },
  { id: 3, url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' },
  { id: 4, url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' },
  { id: 5, url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' },
  // {
  //   id: 6,
  //   url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  // },
  // {
  //   id: 7,
  //   url: 'https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/02f5c620-ee1f-4909-9b9b-6cfd6ee85145/default.jobtemplate.hls.m3u8',
  // },
  // {
  //   id: 8,
  //   url: "https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/02f5c620-ee1f-4909-9b9b-6cfd6ee85145/default.jobtemplate.hls.m3u8",
  // },
  // {
  //   id: 9,
  //   url: "https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/02f5c620-ee1f-4909-9b9b-6cfd6ee85145/default.jobtemplate.hls.m3u8",
  // },
])
// 更换单个
const handleChangeOne = (id, url) => {
  const index = id && id - 1
  videos.value[index].url = url
}
// 要更换所有视频
const newVideos = ref([
  {
    id: 1,
    url: 'https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/02f5c620-ee1f-4909-9b9b-6cfd6ee85145/default.jobtemplate.hls.m3u8',
  },
  {
    id: 2,
    url: 'https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/02f5c620-ee1f-4909-9b9b-6cfd6ee85145/default.jobtemplate.hls.m3u8',
  },
  {
    id: 3,
    url: 'https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/02f5c620-ee1f-4909-9b9b-6cfd6ee85145/default.jobtemplate.hls.m3u8',
  },
  {
    id: 4,
    url: 'https://m.media-amazon.com/images/S/vse-vms-transcoding-artifact-us-east-1-prod/02f5c620-ee1f-4909-9b9b-6cfd6ee85145/default.jobtemplate.hls.m3u8',
  },
])
const handleChangeAll = () => {
  videos.value = newVideos.value
}
</script>

<style lang="scss" scoped>
.videos-view {
  width: 1212px;
  height: 734px;
  margin: 20px;
}
</style>
